<template>
    <div class="tabs">
      <!-- <router-link :to="{name:'index',query: {id:'12'}}">aaa</router-link> -->
        <ul @click="bottomClick(index)" v-for="(item,index) in tabs" :key="index" :class="[tabsIndex ==  index ? 'b_r' : '' ]">
          <figure class="f_r_c_c img1" >
            <img :src="tabsIndex == index ? item.img : item.icon" alt="" style="width:100%;">
          </figure>
            <!-- <i :class="[`${item.icon} f_24 iconfont`] "></i> -->
            <span>{{item.name}}</span>
        </ul>
    </div>
</template>
<script>
export default {
  data() {
    return {
      tabsIndex: "0",
      tabs: [
        { name: "总览", icon: require("../../assets/img/1_03.png"), img:require("../../assets/img/1_05.png")},
        { name: "销售排行", icon: require("../../assets/img/2_03.png"), img:require("../../assets/img/2_05.png") },
        { name: "AI分析",icon: require("../../assets/img/3_03.png"), img:require("../../assets/img/3_05.png") }
      ]
    }
  },
  methods: {
    bottomClick(index) {
      let Index = index;
      this.tabsIndex = index;
    //   console.log(this.tabsIndex);
      let names = ["index", "SalesRank",'AIRank'];
      this.$router.push({
        name: names[Index],
        // params:{msg:'page'}
      });
    }
  }
};
</script>

<style scoped>
.tabs {
  width: 100vw;
  height: 100px;
  background: #fff;
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0px -1px 5px 0px rgba(0, 0, 0, 0.1);
}
.tabs ul {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.f_24 {
  font-size: 46px;
}
.b_r {
  color: red;
}
.img1{
  width:40px;
  height:40px;
  padding:10px 0;
}
.f_r_c_c{
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
